import React, { useMemo } from 'react';
import { Select, Button } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { DataTypeOperatorMap, OperatorNameMap, Operator } from './config';
import FilterValue from './FilterValue';
import VariableSelect from '../common/VariableSelect';
import { getDataTypeObject, getVariableDataType, isDataTypeEqual } from '../../utils/dataType';
import styled from 'styled-components';

const FilterAssignType = {
  Constant: 'CONSTANT',
  Variable: 'VARIABLE',
};

const FilterItem = ({ item, sourceList = [], targetList = [], onChange, onDelete }) => {
  const handleSourceChange = (value) => {
    const current = getVariableDataType(value, sourceList);
    onChange({ envKey: value, dataType: current.dataType });
  };

  const handleOperatorChange = (value) => {
    onChange({ ...item, operator: value, assignType: FilterAssignType.Constant, value: null });
  };

  const handleAssignTypeChange = (value) => {
    onChange({ ...item, assignType: value, value: null });
  };

  const handleTargetChange = (value) => {
    onChange({ ...item, value });
  };

  const isConstant = item.assignType === FilterAssignType.Constant;
  const isVariable = item.assignType === FilterAssignType.Variable;

  const operatorList = useMemo(() => {
    const dataType = getDataTypeObject(item.dataType)?.type;
    const operators = DataTypeOperatorMap[dataType] || [];
    return operators.map(operator => ({
      value: operator,
      label: OperatorNameMap[operator],
    }));
  }, [item.dataType]);

  const isNoValueOperator = !item.operator || [Operator.Empty, Operator.NotEmpty].includes(item.operator);

  const filteredTargetList = useMemo(() => {
    return targetList.filter(target => {
      if (target.envKey === item.envKey) {
        return false;
      }
      return isDataTypeEqual(target.dataType, item.dataType);
    });
  }, [targetList, item.envKey, item.dataType]);

  return (
    <StylesWrap className="filter-item">
      <div className="filter-item-key">
        <VariableSelect
          value={item.envKey}
          options={sourceList}
          onChange={handleSourceChange}
        />
      </div>
      <div className="filter-item-operator">
        <Select
          placeholder="请选择"
          value={item.operator}
          onChange={handleOperatorChange}
          style={{ width: 120 }}
        >
          {operatorList.map(op => (
            <Select.Option key={op.value} value={op.value}>
              {op.label}
            </Select.Option>
          ))}
        </Select>
      </div>
      {!isNoValueOperator && (
        <div className="filter-item-assign-type">
          <Select
            placeholder="请选择"
            value={item.assignType}
            onChange={handleAssignTypeChange}
            style={{ width: 90 }}
          >
            <Select.Option value={FilterAssignType.Constant}>常量</Select.Option>
            <Select.Option value={FilterAssignType.Variable}>变量</Select.Option>
          </Select>
        </div>
      )}
      {!isNoValueOperator && (
        <div className="filter-item-value">
          {isConstant ? (
            <FilterValue
              value={item.value}
              dataType={item.dataType}
              onChange={handleTargetChange}
            />
          ) : (
            <Select
              placeholder="请选择"
              value={item.value}
              onChange={handleTargetChange}
              style={{ width: '100%' }}
            >
              {filteredTargetList.map(source => (
                <Select.Option key={source.envKey} value={source.envKey}>
                  {source.envName}
                </Select.Option>
              ))}
            </Select>
          )}
        </div>
      )}
      <div className="filter-item-action">
        <Button type="text" danger icon={<DeleteOutlined />} onClick={onDelete} />
      </div>
    </StylesWrap>
  );
};

const StylesWrap = styled.div`
  &.filter-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .filter-item-key {
    width: 120px;
    margin-right: 10px;
  }
  .filter-item-operator {
    width: 120px;
    margin-right: 10px;
  }
  .filter-item-assign-type {
    width: 90px;
    margin-right: 10px;
  }
  .filter-item-value {
    flex: 1;
    margin-right: 10px;
  }
  .filter-item-action {
    width: 24px;
  }
}
`

export default FilterItem; 